iT邦幫忙

2024 iThome 鐵人賽

DAY 16
0
Modern Web

蓋一個自己的 Nuxt 3 UI Module系列 第 16

createResolver & addComonent

  • 分享至 

  • xImage
  •  

在昨天成功安裝模組完之後,會很期待馬上想引入元件來看看是否能成功運行了吧!

我當初也是這麼想的~結果卻發現無法順利引入元件QQ (瞬間冷水潑下來)

這是我當初寫的狀況:

首先引入

import { addComponent } form '@nuxt/kit'

再來把之前寫的 <Button/> 元件新增進去

addComponent({
	name: 'button', //component 的名稱
  filePath: './runtime/components/global/button.vue' //檔案的位置 
})

一開始看起來完全沒問題啊!路徑也對了,沒道理不行吧?🤔

結果研究了一會,才發現關鍵在這裡….

注意第一次打開 module.ts 時有一行…

// module.ts
const resolver = createResolver(import.meta.url)

createResolver( ) 用來解析”相對”目前模組的路徑,即便其名稱或副檔名是未知的情況。

import.meta: ES 模組中的內建運算子,它提供關於當前模組的 URL

它們兩個組合起來就可以處理與當前模組相關的相對路徑,且無需手動拼接路徑或處理絕對/相對路徑之間的轉換。

這可真是一個救星,因為接下來的操作會經常用到它~

那麼來修正剛剛的寫法

    addComponent({
      name: 'button',
      filePath: resolver.resolve('./runtime/components/global/button.vue')
    })

有了這個小小的修正就可以引入囉! 🎉

除了以上那種寫法以外,也可以這樣寫

 addComponent({
      name: 'button',
      filePath: resolver.resolve('./runtime', 'components', 'global', 'button')
    })

這個寫法的好處是,當你不確定檔案的副檔名時,它依然可以順利幫你引入對應的元件!記得這個技巧,接下一定會用到的! (很重要!)

———————————————————————————-

createResolver: https://nuxt.com/docs/api/kit/resolving

import.meta.url: https://nuxt.com/docs/api/advanced/import-meta


上一篇
installModule
下一篇
tailwind 與 css 設定
系列文
蓋一個自己的 Nuxt 3 UI Module30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言